<template>
    <div>
        <el-container>
            <!-- 头部 -->
            <el-header style="text-align: center; height: 60px; line-height: 60px; background-color: rgb(080, 130, 255);"></el-header>
            
            <!-- 按钮 -->
            <el-header style="background-color: rgb(0, 160, 255); height: 140px;">
            <!-- 从哪儿出发 -->
            <el-select style="margin-left:300px; margin-top: 30px;" v-model="location1" filterable placeholder='从哪儿出发'>
                <el-option v-for="item in locations" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <i style="margin-left: 10px; font-size:larger;" class="el-icon-refresh"></i>

            <!-- 去哪儿 -->
            <el-select style="margin-left:10px; margin-top: 30px;" v-model="location2" filterable placeholder='到哪儿'>
                <el-option v-for="item in locations" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            
            
            <!-- 日期选择器 -->
            <el-date-picker style="margin-left: 50px;" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>

            <!-- 搜索 -->
            <el-button style="margin-left: 30px; background-color:plum;" type="primary" icon="el-icon-search">搜索</el-button>

            </el-header>
            
            <!-- 主体 -->
            <el-main>
                <el-button style="width: 500px; font-size: 12px; text-align: left; margin-left: 480px; background-color: pink;">你查询的2月23日北京到广州的航班,建议在4月份进行购买呦~<p></p>
                通过数据对比,比途发现4月份北京到广州的航班最划算,8月份价格偏高~
                </el-button>

                <br><br>

                <!-- 12306 -->
                <el-button style="width:800px; font-size:50px; text-align: left; margin-left: 380px; background-color: white;">
                    <el-image style="width: 120px; height: 24px" :src="url4"></el-image>
                    <span style="margin-left: 10px;">|</span>
                    <span style="margin-left: 20px; font-size: 18px; position: absolute; bottom: 370px;">东方航空</span>


                    <span style="margin-left: 20px; font-size: 14px; position: absolute; bottom: 350px;">GJ8009</span>

                    <span style="margin-left: 120px; font-size: 32px; position: absolute; bottom: 360px;">6:50</span>

                    <span style="margin-left: 120px; font-size: 13px; position: absolute; bottom: 388px; left: 695px;">经停天津</span>

                    <span style="margin-left: 200px;">———</span> 

                    <span style="margin-left: 120px; font-size: 13px; position: absolute; bottom: 353px; left: 685px;">13小时1分钟</span>


                    <span style="margin-left: 20px; font-size: 32px; position: absolute; bottom: 360px;">15:50</span>
                    <span style="margin-left: 110px;">|</span>


                    <span style="margin-left: 10px; font-size: 12px; position: absolute; bottom: 390px; left: 1048px;">价格：</span>

                    <span style="margin-left: 10px; font-size: 30px; position: absolute; bottom: 350px; left: 1045px">530</span>
 



                    <el-button @click="tieLu()" style="margin-left: 75px; position: absolute; bottom: 355px; left: 1040px; font-size: 10px;" type="primary" round>去购买</el-button>
                </el-button>
                <br><br>

                <!-- 艺龙 -->
                <el-button style="width: 800px; font-size:50px; text-align: left; margin-left: 380px; background-color: white;">
                    <el-image style="width: 120px; height: 24px" :src="url3"></el-image>
                    <span style="margin-left: 10px;">|</span>
                    <span style="margin-left: 20px; font-size: 18px; position: absolute; bottom: 275px;">东方航空</span>

                    <span style="margin-left: 20px; font-size: 14px; position: absolute; bottom: 255px;">GJ8009</span>


                    <span style="margin-left: 120px; font-size: 32px; position: absolute; bottom: 265px;">6:50</span>
                    
                    <span style="margin-left: 120px; font-size: 13px; position: absolute; bottom: 290px; left: 695px;">经停天津</span>

                    
                    <span style="margin-left: 200px;">———</span> 

                    <span style="margin-left: 120px; font-size: 13px; position: absolute; bottom: 255px; left: 685px;">13小时1分钟</span>

                    <span style="margin-left: 20px; font-size: 32px; position: absolute; bottom: 265px;">15:50</span>
                    <span style="margin-left: 110px;">|</span>   
                    
                    <span style="margin-left: 10px; font-size: 12px; position: absolute; bottom: 293px; left: 1048px;">价格：</span>

                    <span style="margin-left: 10px; font-size: 30px; position: absolute; bottom: 255px; left: 1045px">530</span>



                    <el-button @click="yiLong()" style="margin-left: 75px; position: absolute; bottom: 260px; font-size: 10px; position: absolute; left: 1040px;" type="primary" round>去购买</el-button>        
                </el-button>
                <br><br>

                <!-- 去哪了 -->
                <el-button style="width: 800px; font-size:50px; text-align: left; margin-left: 380px; background-color: white;">
                    <el-image style="width: 120px; height: 24px" :src="url1"></el-image>
                    <span style="margin-left: 10px;">|</span>
                    <span style="margin-left: 20px; font-size: 18px; position: absolute; bottom: 180px;">东方航空</span>

                    <span style="margin-left: 20px; font-size: 14px; position: absolute; bottom: 160px;">GJ8009</span>

                    <span style="margin-left: 120px; font-size: 32px; position: absolute; bottom: 170px;">6:50</span>
                    
                    <span style="margin-left: 120px; font-size: 13px; position: absolute; bottom: 195px; left: 695px;">经停天津</span>


                    <span style="margin-left: 200px;">———</span> 

                    <span style="margin-left: 120px; font-size: 13px; position: absolute; bottom: 160px; left: 685px;">13小时1分钟</span>

                    <span style="margin-left: 20px; font-size: 32px; position: absolute; bottom: 170px;">15:50</span>
                    <span style="margin-left: 110px;">|</span>

                    <span style="margin-left: 10px; font-size: 12px; position: absolute; bottom: 198px; left: 1048px;">价格：</span>

                    <span style="margin-left: 10px; font-size: 30px; position: absolute; bottom: 160px; left: 1045px">530</span>


                    <el-button @click="quNa()" style="margin-left: 75px; position: absolute; bottom: 165px; font-size: 10px; position: absolute; left: 1040px;" type="primary" round>去购买</el-button>
                </el-button>
                <br><br>

                <!-- 飞猪 -->
                <el-button style="width: 800px; font-size:50px; text-align: left; margin-left: 380px; background-color: white;">
                    <el-image style="width: 120px; height: 24px" :src="url2"></el-image>
                    <span style="margin-left: 10px;">|</span>
                    <span style="margin-left: 20px; font-size: 18px; position: absolute; bottom: 85px;">东方航空</span>

                    <span style="margin-left: 20px; font-size: 14px; position: absolute; bottom: 65px;">GJ8009</span>

                    <span style="margin-left: 120px; font-size: 32px; position: absolute; bottom: 75px;">6:50</span>
                    
                    <span style="margin-left: 120px; font-size: 13px; position: absolute; bottom: 95px; left: 695px;">经停天津</span>


                    <span style="margin-left: 200px;">———</span> 


                   <span style="margin-left: 120px; font-size: 13px; position: absolute; bottom: 65px; left: 685px;">13小时1分钟</span>


                    <span style="margin-left: 20px; font-size: 32px; position: absolute; bottom: 75px;">15:50</span>
                    <span style="margin-left: 110px;">|</span>

                    <span style="margin-left: 10px; font-size: 12px; position: absolute; bottom: 100px; left: 1048px;">价格：</span>

                    <span style="margin-left: 10px; font-size: 30px; position: absolute; bottom: 63px; left: 1045px">530</span>

                    <el-button @click="feiZhu()" style="margin-left: 75px; position: absolute; bottom: 70px; font-size: 10px; position: absolute; left: 1040px;" type="primary" round>去购买</el-button>
                </el-button>

            </el-main>
        </el-container> 
    </div>
</template>

<script>
export default {
    data () {
        return {
            locations:[{
                value: '选项1',
                label: '西安'
            },{
                value: '选项2',
                label: '北京'
            },{
                value: '选项3',
                label: '青海'
            }],
            location1:'',
            location2:'',
            date:'',
            url1: 'https://qimgs.qunarzz.com/wpf_newmpic_001/54f70ce8dd89589d3fd2289dcc25b7d8.jpg',
            url2: 'https://img.alicdn.com/imgextra/i1/O1CN01gjTU3l1Zm8azDq6bC_!!6000000003236-2-tps-792-192.png',
            url3: 'https://pavo.elongstatic.com/i/ori/1i8HMZ04KqY.jpg',
            url4: 'https://www.12306.cn/index/images/logo@2x.png'
        }
    },
    methods: {
        feiZhu(){
            window.location.href='https://www.fliggy.com/'
        },
        quNa(){
            window.location.href='https://www.qunar.com/'
        },
        yiLong(){
            window.location.href='https://www.elong.com/'
        },
        tieLu(){
            window.location.href='https://www.12306.cn/index/'
          
        }
    }

}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }

  .el-select {
    color: #333;
  }
</style>